<template>
  <div center>
    <el-form ref="info2" :inline="true" :rules="rules" :model="info" size="mini" label-position="right"
             label-width="110px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="受检单位" prop="sjcdwmc">
            <el-input v-model="info.sjcdwmc" placeholder="请输入内容" :disabled="true"/>
          </el-form-item>
          <el-form-item label="检测编号" prop="jcbh">
            <el-input v-model="info.jcbh" placeholder="请输入内容" :disabled="true"/>
          </el-form-item>
          <el-form-item label="检测类型" prop="jclx">
            <el-input v-model="info.jclx" placeholder="请输入内容" :disabled="isShow"/>
          </el-form-item>

        </el-col>

        <el-col :span="8">
          <el-form-item label="检测项目" prop="jcxm">
            <el-input v-model="info.jcxm" placeholder="请输入内容" :disabled="isShow" @change="getProjectInfo()"/>
          </el-form-item>
          <el-form-item label="采样依据" prop="cyyj">
            <el-input v-model="info.cyyj" placeholder="请输入内容" :disabled="isShow"/>
          </el-form-item>
          <el-form-item label="气压(kPa)" prop="qy">
            <el-input v-model="info.qy" placeholder="请输入内容" :disabled="isShow"/>
          </el-form-item>
          <el-form-item label="风速(m/s)" prop="fs">
            <el-input v-model="info.fs" placeholder="请输入内容" :disabled="isShow"/>
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="采样日期" prop="cyrq">
            <el-date-picker
              v-model="info.cyrq"
              :disabled="isShow"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="相对湿度(%)" prop="xdsd">
            <el-input v-model="info.xdsd" placeholder="请输入内容" :disabled="isShow"/>
          </el-form-item>
          <el-form-item label="温度(℃)" prop="wd">
            <el-input v-model="info.wd" placeholder="请输入内容" :disabled="isShow"/>
          </el-form-item>
          <el-form-item label="采样仪器" prop="cyyq">
            <el-input v-model="info.cyyq" placeholder="请输入内容" :disabled="isShow"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider></el-divider>

      <el-form-item v-if="!isShow">
        <el-button type="warning" size="mini" @click="addTable1(null,null)">添加</el-button>
      </el-form-item>
      <el-table key="table1" border :data="info.table1Json" style="width: 100%">
        <el-table-column
          prop="sampleNumber"
          align="center"
          label="样品编号">
        </el-table-column>
        <el-table-column
          prop="instrumentNumber"
          align="center"
          label="仪器编号">
        </el-table-column>
        <el-table-column
          prop="samplingWorkshop"
          align="center"
          label="采样车间及岗位">
        </el-table-column>
        <el-table-column
          prop="contactTime"
          align="center"
          label="接触时间(h/d)">
        </el-table-column>
        <el-table-column label="采样流量(L/min)" align="center">
          <el-table-column
            prop="samplingBefore"
            align="center"
            label="采样前">
          </el-table-column>
          <el-table-column
            prop="samplingAfter"
            align="center"
            label="采样后">
          </el-table-column>
        </el-table-column>
        <el-table-column label="采样时间" align="center">
          <el-table-column
            prop="samplingStartTime"
            align="center"
            label="开始时间">
          </el-table-column>
          <el-table-column
            prop="samplingEndTime"
            align="center"
            label="结束时间">
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="note"
          align="center"
          label="备注">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作" v-if="!isShow">
          <template slot-scope="scope">
            <el-button @click="addTable1(scope.$index,scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="delTable1(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <el-form-item label="采样人" prop="cyr">
        <el-select v-model="info.cyr" :disabled="isShow" multiple placeholder="请选择" :multiple-limit="2">
          <el-option
            v-for="item in userList"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="校对人" prop="jdr">
        <el-select v-model="info.jdr" :disabled="isShow" multiple placeholder="请选择" :multiple-limit="2">
          <el-option
            v-for="item in userList"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="受检单位陪同人" prop="sjdwptr">
        <el-input type="text" autosize v-model="info.sjdwptr" placeholder="打印后手签" disabled/>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div style="text-align: center" v-if="!isShow">
      <el-button type="primary" size="small" @click="addOrEdit">保存</el-button>
    </div>
    <el-dialog :visible.sync="centerDialogVisible" append-to-body center width="80%">
      <el-form ref="tableInfo" :inline="true" :rules="rules" :model="tableInfo" size="mini" label-position="right"
               label-width="200px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="样品编号" prop="sampleNumber">
              <el-input v-model="tableInfo.sampleNumber" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="仪器编号" prop="instrumentNumber">
              <el-select v-model="tableInfo.instrumentNumber" filterable placeholder="请选择" clearable
                         @blur="selectBlurCharacter">
                <el-option
                  v-for="item in cyyqList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="采样车间及岗位" prop="samplingWorkshop">
              <el-input v-model="tableInfo.samplingWorkshop" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="接触时间(h/d)" prop="contactTime">
              <el-input v-model="tableInfo.contactTime" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="采样流量(L/min)-采样前" prop="samplingBefore">
              <el-input v-model="tableInfo.samplingBefore" @change="copySam()" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="采样流量(L/min)-采样后" prop="samplingAfter">
              <el-input v-model="tableInfo.samplingAfter" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采样时间-开始时间" prop="samplingStartTime">
              <el-time-picker @change="setendtime" type="date"
                              v-model="tableInfo.samplingStartTime"
                              format="HH:mm" value-format='HH:mm'
                              placeholder="任意时间点">
              </el-time-picker>
            </el-form-item>
            <el-form-item label="采样时间-结束时间" prop="samplingEndTime">
              <el-time-picker type="date"
                              v-model="tableInfo.samplingEndTime"
                              format="HH:mm" value-format='HH:mm'
                              placeholder="任意时间点">
              </el-time-picker>
            </el-form-item>
            <el-form-item label="备注" prop="note">
              <el-input v-model="tableInfo.note" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
        <el-button type="primary" size="mini" @click="addOrEditTable1">确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import imgUpdate from '@/components/Upload/imgUpdate'
import { addOrEdit, getInfo, getProjectItem } from '@/api/table/tableFour'
import { getUserList, setEndTime } from '@/api/system/sysUser'
import { getUserId } from '@/utils/auth'
import { getList } from '@/api/system/protectiveWear.js'

export default {
  components: {
    imgUpdate
  },
  props: {
    noCreated: {
      type: Boolean,
      default: null
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      info: {
        cyyj: null,
        samplingAfter: null,
        samplingBefore: null
      },
      userId: getUserId(),
      userList: [],
      cyyqList: [],//采样仪器
      tableInfo: {},
      tableIndex: null,
      table1Id: null,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      rules: {
        dzr: [{ required: true, message: '请输入内容', trigger: 'chang' }],
        sjcdwptr: [{ required: true, message: '请输入内容', trigger: 'chang' }],
        cyrq: [{ required: true, message: '请选择日期', trigger: 'chang' }],
        dzrq: [{ required: true, message: '请选择日期', trigger: 'chang' }],
        shr: [{ required: true, message: '请选择内容', trigger: 'chang' }],
        cyr: [{ required: true, message: '请选择内容', trigger: 'chang' }],
        jdr: [{ required: true, message: '请选择内容', trigger: 'chang' }]
      }
    }
  },
  created() {
    this.getUserList()
    this.info.table1Json = []
    this.info.samplingAfter = null
    this.info.samplingBefore = null
    // this.getCyyqList()
    // this.info.table2Json = []
  },
  methods: {
    selectBlurCharacter(e) {
      if (e.target.value) {
        this.info.yqbh = e.target.value
      }
    },
    copySam() {
      this.tableInfo.samplingAfter = ''
      this.tableInfo.samplingAfter = this.tableInfo.samplingBefore
    },
    setendtime(value) {
      if (value != null) {
        setEndTime(value).then(response => {
          this.tableInfo.samplingEndTime = response.data
        })
      }
    },
    getProjectInfo() {
      getProjectItem(this.info.jcxm).then(response => {
        this.info.cyyj = response.data.testBasis
      })
    },
    // getCyyqList() {
    //   getList(3, 2).then(response => {
    //     if (response.code == 0) {
    //       this.cyyqList = []
    //       response.data.forEach(item => {
    //         this.cyyqList.push({
    //           value: item.name,
    //           label: item.name
    //         })
    //       })
    //     }
    //   })
    // },
    // 新增或编辑表1
    addTable1(index, row) {
      this.tableIndex = index
      this.tableInfo = {
        samplingStartTime: null,
        samplingEndTime: null,
        samplingAfter: null,
        samplingBefore: null
      }
      if (row != null) {
        this.tableInfo = row
      }
      this.centerDialogVisible = true

      // 根据采样仪器 获取 仪器编号
      if (this.info.cyyq != null) {
        getList(null, null, null, this.info.cyyq).then(response => {
          if (response.code == 0) {
            this.cyyqList = []
            response.data.forEach(item => {
              this.cyyqList.push({
                value: item.number,
                label: item.number
              })
            })
          }
        })
      }
    },
    // 保存表1
    addOrEditTable1() {
      if (this.tableIndex == null) {
        this.info.table1Json.push(this.tableInfo)
      } else {
        this.info.table1Json.splice(this.tableIndex, 1, this.tableInfo)
      }
      this.centerDialogVisible = false
    },
    // 删除表1
    delTable1(index, row) {
      this.info.table1Json.splice(index, 1)
    },
    // 获取所有用户
    getUserList() {
      getUserList().then(response => {
        this.userList = response.data
      })
    },
    getInfo(id, table1Id) {
      getInfo(id, table1Id).then(response => {
        if (response.data.table1Json != null && response.data.table1Json != '') {
          response.data.table1Json = JSON.parse(response.data.table1Json)
        } else {
          response.data.table1Json = []
        }
        if (response.data.jdr != null && response.data.jdr != '') {
          response.data.jdr = JSON.parse(response.data.jdr)
          var ids = []
          for (let i = 0; i < response.data.jdr.length; i++) {
            ids.push(response.data.jdr[i].id)
          }
          response.data.jdr = ids
        } else {
          response.data.jdr = []
        }
        if (response.data.cyr != null) {
          response.data.cyr = JSON.parse(response.data.cyr)
          var ids = []
          for (let i = 0; i < response.data.cyr.length; i++) {
            ids.push(response.data.cyr[i].id)
          }
          response.data.cyr = ids
        } else {
          response.data.cyr = []
        }
        this.info = response.data
      })
    },
    addOrEdit: function() {
      this.$refs['info2'].validate((valid) => {
        if (valid) {
          addOrEdit(this.info.id, this.info.tableOneId, this.info.cyrq, JSON.stringify(this.info.jdr), JSON.stringify(this.info.cyr), this.info.sjdwptr,
            JSON.stringify(this.info.table1Json), 1, this.info.jcxm, this.info.jclx, this.info.cyyj, this.info.qy, this.info.fs, this.info.cyyq, this.info.xdsd, this.info.wd, this.info.yqbh, this.info.sjjzqxh, this.info.jzz).then(response => {
            if (response.code != 0) {
              return
            }
            if (this.info.id == null) {
              // 新增
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            } else {
              // 编辑
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }
            this.$parent.$parent.getData()
            this.$parent.$parent.centerDialogVisible = false
          })
        }
      })
    },
    // 初始化
    init(id, table1Id) {
      this.getInfo(id, table1Id)
    }
  }
}
</script>

